<template>
  <div class="glass-card" :style="{ width: width + 'px', height: height + 'px' }">
    <!-- 默认插槽 -->
    <div class="card-content">
      <slot></slot>
    </div>
    <!-- 亮光效果 -->
    <div class="glass-effect"></div>
  </div>
</template>

<script>
export default {
  name: 'GlassCard',
  props: {
    width: {
      type: Number,
      default: 300
    },
    height: {
      type: Number,
      default: 200
    }
  }
}
</script>

<style scoped>
.glass-card {
  position: relative;
  overflow: hidden;
  background-color: #fff;
  border-radius: 12px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card-content {
  position: relative;
  z-index: 2;
  color: white;
}

.glass-effect {
  position: absolute;
  left: -110%;
  top: 0;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(90deg,
      rgba(255, 255, 255, 0),
      rgba(255, 255, 255, 0.5),
      rgba(255, 255, 255, 0));
  transform: skew(-30deg);
  /* 斜线效果 */
  transition: left 0.3s ease;
  /* 亮光过渡效果 */
  z-index: 3;
  /* 确保反光效果在最上层 */
}

.glass-card:hover {
  transform: translateY(-20px);
  /* 卡片上升 */
  box-shadow: 0 26px 40px -24px rgba(0, 0, 0, 0.2);
  /* 阴影效果 */
}

.glass-card:hover .glass-effect {
  left: 110%;
  /* 亮光从左到右移动 */
}
</style>
